<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fortune Cookie UI Prototype</title>

<link rel="stylesheet" href="ui-prototype-style.css">
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>


<script type="text/javascript">

var curPartName = null
var curActivityName = null


function getBorderName(n) {
  return '#' + n + '_border';
}

$(document).ready(function() {

  $(".partbutton").click(function() {
    // Uncolor the old selection:
    if (curPartName) {
      var old_bordername = getBorderName(curPartName);
      $(old_bordername).css("border", "2px solid white");
      curPartName = null
    }

    curPartName = this.id

    var bordername = getBorderName(curPartName);
    $(bordername).css("border", "2px solid #ee0000");
  });


  $(".activitybutton").click(function() {
    // Uncolor the old selection:
    if (curActivityName) {
      var old_bordername = getBorderName(curActivityName);
      $(old_bordername).css("border", "2px solid white");
      curActivityName = null
    }

    curActivityName = this.id

    var bordername = getBorderName(curActivityName);
    $(bordername).css("border", "2px solid #ee0000")
  });


  $(".eventbutton").click(function() {
    curEventName = this.id;
  });


});


</script>

</head>

<body>


  <table border="0" cellpadding="10">

  <tr>

  <td valign="top">

  <table border="0" cellpadding="5">
    <tr>
      <td valign="top">
  
  Part:
 
  <div class="buttonborder" id="Part_Model_border">
    <input type="button" id="Part_Model" class="partbutton" value="Model" />
  </div>

  <div class="buttonborder" id="Part_View_border">
  <input type="button" id="Part_View" class="partbutton" value="View" />
  </div>

  <div class="buttonborder" id="Part_Controller_border">
  <input type="button" id="Part_Controller" class="partbutton" value="Controller" />
  </div>

  <div class="buttonborder" id="Part_Foundation_border"> <input type="button" id="Part_Foundation" class="partbutton" value="Foundation" />
  </div>

    </td>
  </tr>

  <tr>
    <td valign="top">

  Activity:

  <div class="buttonborder" id="Activity_AddNew_border">
    <input type="button" id="Activity_AddNew" class="activitybutton" value="Adding new functionality" />
  </div>

  <div class="buttonborder" id="Activity_Web_border">
  <input type="button" id="Activity_Web" class="activitybutton" value="On the Web" />
  </div>

  <div class="buttonborder" id="Activity_Test_border">
  <input type="button" id="Activity_Test" class="activitybutton" value="Testing" />
  </div>

  <div class="buttonborder" id="Activity_Debug_border">
  <input type="button" id="Activity_Debug" class="activitybutton" value="Debugging" />
  </div>

  <div class="buttonborder" id="Activity_Planning_border">
  <input type="button" id="Activity_Planning" class="activitybutton" value="Planning" />
  </div>

  <div class="buttonborder" id="Activity_ExistingCodebase_border">
  <input type="button" id="Activity_ExistingCodebase" class="activitybutton" value="Sensemaking in existing code" />

  </div>
  <div class="buttonborder" id="Activity_ToolSetup_border">
  <input type="button" id="Activity_ToolSetup" class="activitybutton" value="Setting up tools" />
  </div>

  <div class="buttonborder" id="Activity_Researcher_border">
  <input type="button" id="Activity_Researcher" class="activitybutton" value="Interacting w/ Researcher" />
  </div>

  <div class="buttonborder" id="Activity_Other_border">
  <input type="button" id="Activity_Other" class="activitybutton" value="Other" />
  </div>

    </td>
  </tr>
</table>

</td>

<td valign="top">

  Event:

  <div class="buttonborder" id="Event_PickNose_border">
    <input type="button" id="Event_PickNose" class="eventbutton"
    value="Picking Nose" />
  </div>

  <div class="buttonborder" id="Event_ScratchButt_border">
    <input type="button" id="Event_ScratchButt" class="eventbutton"
    value="Scratching Butt" />
  </div>

  <div class="buttonborder" id="Event_SniffArmpits_border">
    <input type="button" id="Event_SniffArmpits" class="eventbutton"
    value="Sniffing Armpits" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

  <div class="buttonborder" id="">
    <input type="button" id="" class="eventbutton"
    value="Blah event" />
  </div>

</td>

<td valign="top">

  Existing tags:

  <div style="border: 1px solid #dddddd; padding: 3px; margin-bottom: 4px;">
    Scratching Butt<br/>
    Activity: Setting up tools<br/>
    Part: Controller<br/>
    Time: 23:29<br/>

    <input type="button" value="Jump"/>
    <input type="button" value="Delete"/>
  </div>

   <div style="border: 1px solid #dddddd; padding: 3px; margin-bottom: 4px;">
    Picking Nose<br/>
    Activity: Setting up tools<br/>
    Part: Controller<br/>
    Begin Time: 23:29<br/>

    <input type="button" value="Jump"/>
  </div>

   <div style="border: 1px solid #dddddd; padding: 3px; margin-bottom: 4px;">
    Scratching Butt<br/>
    Activity: Setting up tools<br/>
    Part: Controller<br/>
    Time: 23:29<br/>

    <input type="button" value="Jump"/>
  </div>

  <div style="border: 1px solid #dddddd; padding: 3px; margin-bottom: 4px;">
    BEGIN ACTIVITY<br/>
    Activity: Debugging<br/>
    Part: Controller<br/>
    Time: 25:11<br/>

    <input type="button" value="Jump"/>
  </div>

  <div style="border: 1px solid #dddddd; padding: 3px; margin-bottom: 4px;">
    BEGIN PART<br/>
    Activity: Setting up tools<br/>
    Part: Model<br/>
    Time: 34:23<br/>

    <input type="button" value="Jump"/>
  </div>


</td>


</table>


<i>Maybe put 'Already-tagged events' in an iframe so that we can have
  scrollbars?  We will likely have LOTS of these events so that they
  can't possibly all fit on the screen.  TABLE FORMAT WOULD BE NICE</i>


</body>

</html>
